<template>
  <div class="app-container">
    <el-card shadow="always">
      <el-row>
        <el-col class="left_input">
          <span>关键字</span>
          <el-input v-model="keyword" class="catalogue" />
        </el-col>
        <el-col class="right_button">
          <el-button @click="clearClick">清除</el-button>
          <el-button type="primary" @click="searchClick">搜索</el-button>
        </el-col>
      </el-row>
      <div class="alert" closable="false">
        <el-alert :closable="false" :title="`数据一共${page.counts}条`" type="info" show-icon />
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="questionType" label="题型" />
        <el-table-column prop="id" label="题目编号" />
        <el-table-column prop="addTime" label="录入时间" />
        <el-table-column prop="totalSeconds" label="答题时间(s)" />
        <el-table-column prop="accuracyRate" label="正确率" />
        <el-table-column prop="userName" label="录入人" />
        <el-table-column label="操作" sortable="" fixed="right" width="150">
          <template v-slot="{row}">
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="delRoles(row)" />
          </template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>

<script>
// import testList from '@/components/testList.json'
const testList = require('@/components/testList.json')
export default {
  name: 'TableLayout',
  data() {
    return {
      activeNames: '',
			keyword: '',
      rules: {},
      stateList: [
        {
          value: '选项1',
          label: '启用'
        }, {
          value: '选项2',
          label: '关闭'
        }
      ],
      tableData: [],
			page: { // 声明一个对象，保存分页的数据
				page: 1,
				pagesize: 10,
				counts: 0
			},
			questionIDs: [],
			questionIDsId: '',
			questionIDsNumber: ''
    }
  },
	created() {
		this.getTestList()

	},
  methods: {
		// 请求标签的列表数据
		async	getTestList() {
			this.page.page = testList.page
			this.page.counts = testList.counts
			this.page.pagesize = testList.pagesize
			this.tableData = testList.items
			this.tableData.forEach(item => {
				this.questionIDs = item.questionIDs
				this.questionIDs.forEach(item => {
					this.questionIDsId = item.id
					this.questionIDsNumber = item.number
				})
			})
			this.tableData.forEach(item => {
				if (item.questionType === '1') {
					item.questionType = '单选题'
				} else if (item.questionType === '2') {
					item.questionType = '多选题'
				} else {
					item.questionType = '简答题'
				}
			})
		},
		// 点击删除按钮，删除当前行的数据
		async delRoles(row) {
			try {
				await this.$confirm('确定要删除当前数据吗?')
				for (var i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i] === row) {
						this.tableData.splice(i, 1)
						break
					}
				}
				this.getTestList()
				this.$message.success('删除成功！')
			} catch (err) {
				console.log(err);
			}
		},
		// 点击搜索按钮，搜索内容
		searchClick() {
			const arr = []
			this.tableData.forEach(item => {
				if (item.id.indexOf(this.keyword) !== -1) {
					return arr.push(item)
				}
			})
			this.tableData = arr
		},
		// 点击清空按钮，清空搜索框中的内容
		clearClick() {
			this.keyword = ''
		}
  }
}
</script>
<style lang='scss' scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
.left_input{
	width: 300px;
}
span{
	font-weight: 600;
	margin-right: 20px;
}
::v-deep .el-input{
	width: 200px;
}
.right_select{
	float: left;
	width: 300px;
}
.right_button{
	float: right;
	width: 155px;
	margin-right: 40px;
	button{
		float: left;
	}
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
::v-deep .el-row{
	margin: 20px;
}
</style>

